<template>
  <div class="table-item">
    <el-row class="table-item_panel">
      <el-col :span="4" align="center">昵称/手机</el-col>
      <el-col :span="6" align="center">商品信息：{{ details.goodsName }}</el-col>
      <el-col :span="6" align="center">订单号：{{ details.orderNo }}</el-col>
      <el-col :span="2" :offset="6" align="center" style="color: #409eff"
        >赠送{{ details.giveAmount || 0 }}积分</el-col
      >
    </el-row>

    <el-row type="flex">
      <el-col
        :span="4"
        align="center"
        class="flex flex-col items-center justify-center mr-30"
        style="border-right: 1px solid #eee"
      >
        <p class="ft-14">{{ details.userNickname }}</p>
        <p class="ft-14 mt-10">{{ details.userPhone }}</p>
      </el-col>
      <el-col :span="20">
        <el-row
          v-for="(element, pIndex) in details.commentSkuList"
          :key="pIndex"
          class="flex items-center pt-20 pb-20"
          :style="
            details.commentSkuList.length > 1 && pIndex < details.commentSkuList.length - 1
              ? 'border-bottom: 1px solid #eee'
              : ''
          "
        >
          <el-col :span="7" align="center" class="appraise-content flex flex-col justify-between">
            <p class="ft-14">{{ element.goodsSkuDesc }}</p>
            <div class="mt-10">
              <el-tag
                v-for="(item, index) in element.labelNames"
                :key="index"
                type="danger"
                effect="dark"
                class="mr-10 mb-5"
                >{{ item }}</el-tag
              >
            </div>
            <p class="appraise-content_text mt-10 ft-12">
              {{ element.content }}
            </p>
            <div class="appraise-content_imgList mt-10">
              <el-image
                v-for="(item, index) in element.images"
                :key="index"
                class="appraise-content_imgItem mr-10"
                :src="item"
                :preview-src-list="[item]"
              />
            </div>
          </el-col>
          <el-col :span="7" class="flex flex-col items-center" align="center">
            <div class="flex mt-10">
              <p class="ft-14 mr-10" style="line-height: 20px">商品质量</p>
              <el-rate :value="element.goodsQualityStar" />
            </div>
            <div class="flex mt-10">
              <p class="ft-14 mr-10" style="line-height: 20px">物流服务</p>
              <el-rate :value="element.expressServiceStar" disabled-void-color="#333" />
            </div>
            <div class="flex mt-10">
              <p class="ft-14 mr-10" style="line-height: 20px">客服态度</p>
              <el-rate :value="element.customerServiceStar" />
            </div>
          </el-col>
          <el-col :span="3" class="ft-14" align="center">{{ element.sort }}</el-col>
          <el-col :span="4" class="ft-14" align="center">{{ details.createdTime }}</el-col>
          <el-col :span="3" class="ft-14" align="center">
            <el-button type="text" @click="update(element.id)">编辑</el-button>

            <PopConfirm text="确认删除该条评论吗？" :confirm="() => submit(element.id)">
              <el-button class="ml-10" type="text" size="mini">删除</el-button>
            </PopConfirm>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'TableItem',
  props: {
    details: Object
  },
  methods: {
    // 编辑
    update(id) {
      this.$router.push({ path: '/order/edit_evaluate', query: { id } })
    },
    // 确定删除
    submit(id) {
      this.$emit('delete', id)
    }
  }
}
</script>

<style lang="scss" scoped>
.table-item {
  margin-top: 20px;
  border: 1px solid #eee;
  &_panel {
    font-size: 14px;
    padding: 10px 20px;
    background-color: #f7f8fa;
  }
  .appraise-content {
    &_text {
      @include ellipsis(2);
    }
    &_imgItem {
      width: 60px;
      height: 60px;
    }
  }
}
</style>
